<template>
  <div class="app-container">

    <div class="filter-container">
      <el-form :inline="true">
        <!-- <el-form-item label="行政区域">
          <el-cascader placeholder="请选择行政区域" v-model="temp.adminstrativeArr" :options="areaList.children" :props="{
              label: 'label',
              value: 'label'
            }" @change="handleCityChange">
          </el-cascader>
        </el-form-item> -->
        <el-form-item label="接入单位">
          <el-select v-model="deviceListQuery.item.userInfoId" placeholder="请选择一个接入单位" clearable
            @change="selectTrigger" @clear="clearCompany" filterable>
            <el-option v-for="(item,index) in companyList" :key="index" :label="item.deviceName" :value="item.deviceMac">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="测点">
          <el-select v-model="listQuery.item.deviceMac" placeholder="请选择一个测点" clearable
            @change="selectTriggerDevice" filterable>
            <el-option v-for="(item,index) in deviceList" :key="index+'device'" :label="item.deviceName"
              :value="item.deviceMac">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="数据状态">
          <el-select v-model="listQuery.item.username" placeholder="请选择数据状态" clearable="">
            <el-option v-for="item in companyList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="设备状态">
          <el-select v-model="listQuery.item.username" placeho lder="请选择设备状态" clearable="" filterable>
            <el-option v-for="item in companyList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检测数据类型">
          <el-select v-model="listQuery.item.username" placeholder="请选择检测数据类型" clearable="" filterable>
            <el-option v-for="item in companyList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="success" icon="el-icon-search" @click="handleFilter" :loading="btnLoading">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-collapse accordion class="date-view" v-model="activiteIndex" @change="handleChange">
      <el-collapse-item v-for="(item,index) in list" :key="index" :name="index">
        <template slot="title">
          <span>
            [ {{item.deviceMac +" ]    "+item.data17}}
          </span>
          <span class="date">
            <i class="el-icon-time"></i>
            {{format(item.syncTime)}}
          </span>
        </template>
        <!-- <div v-if="item.deviceInfo">{{item.deviceInfo.data10}}</div> -->
        <div class="details-device-info" v-if="item.deviceInfo && (item.deviceInfo.data16 == 1 ||item.deviceInfo.data16 == 2)">
          <div class="mdiv-box">
            <label class="label-box-font border-box">浓度值（mg/m³）</label>
            <div class="border-box">
              <label class="label-box-font margin-left-10 ">
                <span class="svg-container green">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>油烟：{{item.deviceInfo.data1}}</label>
              <label class="label-box-font margin-left-10"><span class="svg-container green">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>颗粒物：{{item.deviceInfo.data2}}</label>
              <label class="label-box-font margin-left-10"><span class="svg-container green">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>NMHC：{{item.deviceInfo.data3}}</label>
                <label class="label-box-font margin-left-10"><span class="svg-container green">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>温度：{{item.deviceInfo.data7}}℃</label>
                <label class="label-box-font margin-left-10"><span class="svg-container green">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>湿度：{{item.deviceInfo.data8}}%</label>
                <label class="label-box-font margin-left-10" style="float: right;">
                </span>{{item.deviceInfo.syncTime}}</label>
            </div>
          </div>
          <div class="mdiv-box-1">
            <div class="mdiv-box">
              <label v-if="item.deviceInfo.data10 === '1'" class="label-box-font border-box">净化器（运行中）</label>
              <label  v-else class="label-box-font border-box">净化器（未运行）</label>
              <div class="border-box">
                <label class="label-box-font margin-left-10"><span class="svg-container green">
                    <svg-icon icon-class="my-dot"></svg-icon>
                  </span>电压：{{item.deviceInfo.dcdy}}V</label>
                <label class="label-box-font margin-left-10"><span class="svg-container green">
                    <svg-icon icon-class="my-dot"></svg-icon>
                  </span>电流：{{item.deviceInfo.data12}}A</label>
                <label v-if="item.deviceInfo.data13*1 > 200" class="label-box-font margin-left-10"
                  style="color: red;"><span class="svg-container red">
                    <svg-icon icon-class="my-dot"></svg-icon>
                  </span>压差：{{item.deviceInfo.data13}}Pa</label>
                <label v-else class="label-box-font margin-left-10"><span class="svg-container green">
                    <svg-icon icon-class="my-dot"></svg-icon>
                  </span>压差：{{item.deviceInfo.data13}}Pa</label>
                  <label v-if="item.deviceInfo.data9 === '1'" class="label-box-font border-box margin-left-10">排风机（运行中）</label>
                  <label v-else class="label-box-font  border-box margin-left-10">排风机（未运行）</label>
                  <label class="label-box-font border-box margin-left-10">电流：{{item.deviceInfo.data11}}A</label>
              </div>
            </div>

          </div>
        </div>
        <div class="details-device-info" v-else-if="item.deviceInfo && (item.deviceInfo.data16 == 3 ||item.deviceInfo.data16 == 4)">
          <div class="mdiv-box">
            <label class="label-box-font border-box">浓度值（mg/m³）</label>
            <div class="border-box">
              <label class="label-box-font margin-left-10 ">
                <span class="svg-container green">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>油烟：{{item.deviceInfo.data1}}</label>
              <label class="label-box-font margin-left-10"><span class="svg-container green">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>颗粒物：{{item.deviceInfo.data2}}</label>
              <label class="label-box-font margin-left-10"><span class="svg-container green">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>NMHC：{{item.deviceInfo.data3}}</label>
                <label class="label-box-font margin-left-10" style="float: right;">
                </span>{{item.deviceInfo.syncTime}}</label>
            </div>
          </div>
          <div class="mdiv-box border-box" v-show ="item.deviceInfo.data16 == 3 || item.deviceInfo.data16 == 4">
            <label class="label-box-font border-box" style="width: 120px;">烟道参数</label>
            <div class="border-box" style="flex-direction: column; display: inline-flex;">
              <div>
                <label class="label-box-font marage-left-10">采样流量：{{item.deviceInfo.data7}}L/min</label>
                <label class="label-box-font marage-left-10">大气压强：{{item.deviceInfo.data8}}kPa</label>
                <label class="label-box-font marage-left-10">烟气动压：{{item.deviceInfo.data9}}Pa</label>
              <!-- </div> -->
              <!-- <div class="marage-top-5"> -->
                <label class="label-box-font marage-left-10 marage-top-5">烟气静压：{{item.deviceInfo.data10}}kPa</label>
                <label class="label-box-font marage-left-10 marage-top-5">烟气流速：{{item.deviceInfo.data11}}m/s</label>
                <label class="label-box-font marage-left-10 ">风量：{{item.deviceInfo.data12}}L/min</label>
              </div>
            <div class="marage-top-5">
              <label class="label-box-font marage-left-10 marage-top-5" v-if = "item.deviceInfo.data16 == 3">加热温度：{{item.deviceInfo.data13}}℃</label>
            <label class="label-box-font marage-left-10 marage-top-5" v-if = "item.deviceInfo.data16 == 3">含湿量：{{item.deviceInfo.data14}}%</label>
            <label class="label-box-font marage-left-10 marage-top-5" v-if = "item.deviceInfo.data16 == 3">稀释流量：{{item.deviceInfo.data15}}L/min</label>
            </div>
       </div>
        </div>
          <div class="mdiv-box-1">
            <div class="mdiv-box">
              <label v-if="item.dcList[0].data8 === '1'" class="label-box-font border-box">净化器（运行中）</label>
              <label  v-else class="label-box-font border-box">净化器（未运行）</label>
              <label v-if="item.dcList[0].data7 === '1'" class="label-box-font border-box">排风机（运行中）</label>
              <label v-else class="label-box-font  border-box">排风机（未运行）</label>
            </div>
           
          </div>
        </div>
        
<!-- 电数据 -->
        <div v-if="item.dcList && item.dcList.length > 0">
        <el-table v-if="item.dcList && item.deviceInfo.data16 == 1 " :data="item.dcList" stripe style="width: 100%">
          <el-table-column type="index" label="#" width="80">
          </el-table-column>
          <el-table-column prop="data1" label="电场" width="100">
          </el-table-column>
          <el-table-column label="一次电压" width="140">
            <template slot-scope="scope">
              <span>{{item.deviceInfo.dcdy}}V</span>
            </template>
          </el-table-column>

          <el-table-column prop="data2" label="二次电压" width="140">
            <template slot-scope="scope">
              <span v-if=" scope.row.data2 !='x' && scope.row.data2 !='' && (scope.row.data2 *1) <= 9"
              style="color: red;">{{scope.row.data2}}kV</span>
            <span v-else>{{scope.row.data2}}kV</span>
            </template>
          </el-table-column>
          <el-table-column label="二次电流" width="140">
            <template slot-scope="scope">
              <span>{{scope.row.data3}}mA</span>
            </template>
          </el-table-column>
          <el-table-column label="二次功率" width="140">
            <template slot-scope="scope">
              <span>{{scope.row.data4}}W</span>
            </template>
          </el-table-column>

          <el-table-column label="保护" width="50">
            <template slot-scope="scope" v-if="scope.row.data7 !=='' ">
              <span class="svg-container red" v-if="scope.row.data7 === '0'">
                <svg-icon icon-class="my-dot"></svg-icon>
              </span>
              <span class="svg-container green" v-else>
                <svg-icon icon-class="my-dot"></svg-icon>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="开路" width="50">
            <template slot-scope="scope" v-if="scope.row.data6 !=='' && scope.row.data7 !==''">
              <span class="svg-container red" v-if="scope.row.data6 === '0'">
                <svg-icon icon-class="my-dot"></svg-icon>
              </span>
              <span class="svg-container green" v-else>
                <svg-icon icon-class="my-dot"></svg-icon>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="短路" width="50">
            <template slot-scope="scope" v-if="scope.row.data8 !=='' ">
              <span class="svg-container red" v-if="scope.row.data8 === '1'">
                <svg-icon icon-class="my-dot"></svg-icon>
              </span>
              <span class="svg-container green" v-else>
                <svg-icon icon-class="my-dot"></svg-icon>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="超温" width="50">
            <template slot-scope="scope" v-if="scope.row.data9 !=='' ">
              <span class="svg-container red" v-if="scope.row.data9 === '1'">
                <svg-icon icon-class="my-dot"></svg-icon>
              </span>
              <span class="svg-container green" v-else>
                <svg-icon icon-class="my-dot"></svg-icon>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-else-if="item.dcList && item.deviceInfo.data16 == 2 " :data="item.dcList" stripe style="width: 100%">
          <el-table-column type="index" label="#" width="80">
          </el-table-column>
          <el-table-column prop="data1" label="电场" width="100">
          </el-table-column>
          <el-table-column label="一次电压" width="140">
            <template slot-scope="scope">
              <span>{{item.deviceInfo.dcdy}}V</span>
            </template>
          </el-table-column>
          <el-table-column label="一次电流" width="140">
            <template slot-scope="scope">
              <span>{{scope.row.data3}}A</span>
            </template>
          </el-table-column>
          <el-table-column prop="data5" label="二次电压" width="140">
            <template slot-scope="scope">
              <span v-if=" scope.row.data5 !='x' && scope.row.data5 !='' && (scope.row.data5 *1) <= 9"
              style="color: red;">{{scope.row.data5}}kV</span>
            <span v-else>{{scope.row.data5}}kV</span>
            </template>
          </el-table-column>
          <el-table-column label="二次电流" width="140">
            <template slot-scope="scope">
              <span>{{scope.row.data6}}mA</span>
            </template>
          </el-table-column>
          <el-table-column label="二次功率" width="140">
            <template slot-scope="scope">
              <span>{{scope.row.data4}}W</span>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-else-if="item.dcList && (item.deviceInfo.data16 == 3 || item.deviceInfo.data16 == 4)" :data="item.dcList" stripe style="width: 100%">
          <el-table-column type="index" label="#" width="80">
          </el-table-column>
          <el-table-column prop="data1" label="电场" width="100">
          </el-table-column>
          <el-table-column label="一次电压" width="140">
            <template slot-scope="scope">
              <span>{{scope.row.data2}}V</span>
            </template>
          </el-table-column>
          <el-table-column label="一次电流" width="140">
            <template slot-scope="scope">
              <span>{{scope.row.data3}}A</span>
            </template>
          </el-table-column>
          <el-table-column prop="data5" label="二次电压" width="140">
            <template slot-scope="scope">
              <span v-if=" scope.row.data5 !='x' && scope.row.data5 !='' && (scope.row.data5 *1) <= 9"
              style="color: red;">{{scope.row.data5}}kV</span>
            <span v-else>{{scope.row.data5}}kV</span>
            </template>
          </el-table-column>
          <el-table-column label="二次电流" width="140">
            <template slot-scope="scope">
              <span>{{scope.row.data6}}mA</span>
            </template>
          </el-table-column>
        </el-table>
      </div >
        <div v-else class="label-box-font font-size-14" style="flex-direction: column; display: inline-flex;">
          <label class="label-box-font font-size-14">
            未获取到电场信息.
          </label>
          <label class="label-box-font font-size-14">
            原因之一：未录入电场设备信息
          </label class="label-box-font font-size-14">
          <label>
            原因之二：未采集电场数据信息
          </label>
        </div>
      </el-collapse-item>
    </el-collapse>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
      width="100%">
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { queryRealData, getDetailsByDeviceMac, queryDeviceByUserInfoIdPage } from '@/api/isp'
  import { getCompany } from '@/api/map'
  import { mapGetters } from 'vuex'
  import Vue from 'vue'
  import areaList from '../../../static/json/area.json'
  var timeago = require('timeago.js')
  export default {
    name: 'IspIndex',
    computed: {
      ...mapGetters([
        'token'
      ])
    },
    components: {
    },
    data() {
      return {
        ycdy: '',
        activiteIndex: '',
        btnLoading: false,
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          view: '实时详情'
        },
        dialogVisible: false,
        temp: {
          username: '', // 负责人姓名
          adminstrativeArr: [],
          adminstrative: '', // 行政区域
          address: '', // 详细地址
          company: '', // 公司名称
          job: '', // 所在岗位
          telephone: '', // 联系电话
          creditCode: '', // 信用代码
          dischargePermit: '', // 排污许可
          userId: '' // 当前登录人ID
        },
        deviceListQuery: {
          page: {
            num: 1,
            total: 0,
            size: 999999
          },
          item: {
            userInfoId: ''//企业ID
          }
        },
        mSelectItem: { deviceMac: '', index: -1 }, //已经打开的折叠面板
        listLoading: false,
        list: [],
        listQuery: {
          page: {
            num: 1,
            total: 0,
            size: 10
          },
          item: {
            userId: '',
            deviceMac: ''
          }
        },
        companyListQuery: {
          page: {
            num: 1,
            total: 0,
            size: 99999
          },
          item: {
            name: '',
            company: ''
          }
        },
        // 行政区域数据
        areaList,
        companyList: [],
        deviceList: [],
        timer: null
      }
    },
    watch: {
      // 表单内容体
      temp: {
        handler: function(val, oldVal) {
        },
        deep: true
      },
      // 搜索条件体
      listQuery: {
        handler: function(val, oldVal) {
        },
        deep: true
      }
    },
    mounted() {
      if (this.timer) {
        clearInterval(this.timer)
      } else {
        this.timer = setInterval(() => {
          this.getList()
        }, 120000)
      }
    },
    desroyed() {
      clearInterval(this.timer)
    },
    created() {
      this.listQuery.item.userId = this.token
      this.companyListQuery.item.userId = this.token
      this.temp.userId = this.token * 1
      // 取列表
      this.getCompanyList()
      this.getList()
      this.getYCDY()
    },
    activated() {
      // 取列表
      this.getList()
      this.getCompanyList()
    },
    deactivated() {
    },
    methods: {
      selectTrigger(val) {
        console.log('val :>> ', val)
        this.listQuery.item.deviceMac = ''
        if (val === '') {
          return
        }
        this.deviceListQuery.item.userInfoId = val
        this.getDeviceList()
      },
      selectTriggerDevice(val) {
        if (val === '') {
          return
        }
        console.log('deviceMac :>> ', val)
        this.listQuery.item.deviceMac = val
      },
      clearCompany() {
        this.listQuery.item.deviceMac = ''
        this.deviceList = []
      },
      getDeviceList() {
        this.deviceMac = []
        queryDeviceByUserInfoIdPage(this.deviceListQuery.item.userInfoId * 1).then(res => {
          this.deviceList = res.data
        }).catch(err => {
          err
        })
      },
      // 获取列表
      getCompanyList() {
        this.listLoading = true
        return getCompany(this.companyListQuery.item.userId, this.companyListQuery.item.company, this.companyListQuery.page.num, this.companyListQuery.page.size).then(response => {
          // this.list = response.data
          this.companyList = response.data
          this.companyListQuery.page.total = response.totalData
          this.listLoading = false
        }).catch(err => {
          err
          this.listLoading = false
        })
      },
      format(val) {
        // 不自动更新
        console.log('var :>> ', val)
        // var timeagoInstance = timeago// 实例
        var time = timeago.format(val, 'zh_CN')
        if (time.indexOf('后') > -1) {
          time = '刚刚'
        }
        return time
      },
      // 选择地区
      handleCityChange(value) {
      },
      // 改变每页显示条数
      handleSizeChange(val) {
        this.listQuery.page.size = val
        this.getList()
      },
      // 改变当前页面
      handleCurrentChange(val) {
        this.listQuery.page.num = val
        this.getList()
      },
      // 搜索
      handleFilter() {
        this.btnLoading = true
        this.listQuery.page.num = 1
        this.getList().then(() => {
          this.btnLoading = false
        }).catch(() => {
          this.btnLoading = false
        })
      },
      handleChange(val) {
        var _that = this
        console.log(val)
        if (val !== '') {
          var info = _that.list[val]
          _that.mSelectItem = {
            deviceMac: info.deviceMac,
            index: val
          }
          _that.getDeviceDetails(info.deviceMac, val)
          //  info.diviceMac;
        } else {
          _that.mSelectItem = { deviceMac: '', index: -1 }
        }
      },
      getDeviceDetails(deviceMac, index) {
        var _that = this
        getDetailsByDeviceMac(deviceMac).then(res => {
          const resList = res.data
          var dcList = []
          var deviceInfo = ''
          for (let i = 0; i < resList.length; i++) {
            const element = resList[i]
            if (element.data1.indexOf('Unit') === -1) {
              var newItem = element
              newItem.dcdy = this.getYCDY()
              deviceInfo = newItem
            } else {
              dcList.push(element)
            }
          }
          Vue.set(_that.list[index], 'deviceInfo', deviceInfo)
          Vue.set(_that.list[index], 'dcList', dcList)
          console.log(_that.list)
        }).catch(err => {
          console.log(err)
        })
      },
  
      // 获取列表
      getList() {
        this.listLoading = true
        return queryRealData(this.listQuery.item.userId, this.listQuery.item.deviceMac).then(response => {
          var newItem = response.data
          this.list = newItem
          // this.listQuery.page.total = response.totalpages * this.listQuery.page.size
          this.listQuery.page.total = response.totalData
          this.listLoading = false
          if (this.mSelectItem.deviceMac !== '' && this.mSelectItem.index !== -1) {
            this.getDeviceDetails(this.mSelectItem.deviceMac, this.mSelectItem.index)
          }
        }).catch(err => {
          err
          this.listLoading = false
        })
      },
      // 重置数据
      resetTemp() {
        this.temp = {
          username: '', // 负责人姓名
          adminstrativeArr: [],
          adminstrative: '', // 行政区域
          address: '', // 详细地址
          company: '', // 公司名称
          job: '', // 所在岗位
          telephone: '', // 联系电话
          creditCode: '', // 信用代码
          dischargePermit: '', // 排污许可
          userId: this.token * 1 // 当前登录人ID
        }
        return this.temp
      },
      // 查看详情
      handleView(row) {
        this.temp = Object.assign({}, this.resetTemp(), row) // copy obj
        this.dialogStatus = 'view'
        this.dialogFormVisible = true
      },
      getYCDY() {
        var start = Math.floor(Math.random() * (223 - 218)) + 218
        var end = Math.floor(Math.random() * (99 - 0)) + 0
        if (end === 0) {
          return start
        } else if (end < 10) {
          return start + '.' + end + '0'
        } else {
          return start + '.' + end
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .date-view {
    /deep/ .el-collapse-item {
      border-right: 1px solid #EBEEF5;
      border-left: 1px solid #EBEEF5;
      padding: 0 20px;
    }

    /deep/ .el-collapse-item__header {
      position: relative;
      border-bottom: 1px solid #EBEEF5;

      .date {
        position: absolute;
        right: 40px;
        top: 0;
      }
    }
  }

  .font-size-14 {
    font-size: 14px;
  }

  .details-device-info {
    background-color: #ffffff;
    /* height: 100px; */
    padding-top: 10px;
  }

  .mdiv-box {
    width: 100%;
    padding-left: 15px;
    padding-right: 20px;
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .mdiv-box-1 {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .margin-left-10 {
    margin-left: 40px;
  }

  .marage-left-10{
    padding-left: 10px;
  }
  
  .marage-top-5{
    padding-top: 0px;
  }
  .div-hint {
    display: inline-flex;
    flex-direction: row;
    margin-top: 10px;
    margin-left: 30px;
    margin-bottom: 10px;
  }
</style>